<template>
  <div style="padding:10px">
    <a-button type="primary" @click="add">
      添加
    </a-button>
    <a-table
      bordered
      ref="table"
      :rowKey="
        (row, index) => {
          return index;
        }
      "
      :loading="spinning"
      :columns="columns"
      :data-source="tableData"
      :pagination="pagination"
      @change="tableChange"
    >
      <span
        style="color: #0691fe"
        slot="index"
        slot-scope="text, record, index"
      >
        {{ (pagination.current - 1) * pagination.pageSize + (index + 1) }}
      </span>
      <span slot="action" slot-scope="text, record, index">
        <div class="ac_icons">
          <a-tooltip>
            <template slot="title"> 编辑 </template>
            <a-icon type="edit" />
          </a-tooltip>
          <a-tooltip>
            <template slot="title"> 删除 </template>
            <a-icon type="delete" @click="del(index)" />
          </a-tooltip>
        </div>
      </span>
    </a-table>
  </div>
</template>

<script>
export default {
  name: "STable",
  data() {
    return {
      columns: [
        {
          title: "序号",
          align: "center",
          width: "60px",
          scopedSlots: { customRender: "index" }
        },
        {
          title: "名称",
          dataIndex: "name",
          align: "center",
          ellipsis: true
        },
        {
          title: "地址",
          dataIndex: "address",
          align: "center",
          ellipsis: true
        },
        {
          title: "操作",
          dataIndex: "action",
          width: "100px",
          scopedSlots: { customRender: "action" },
          align: "center"
        }
      ],
      pagination: {
        pageSize: 5,
        current: 1,
        total: 0
      },
      tableData: [
        { name: "1", address: "1.1.1" },
        { name: "2", address: "2.2.2" },
        { name: "3", address: "3.3.3" },
        { name: "4", address: "4.4.4" },
        { name: "5", address: "5.5.5" },
        { name: "6", address: "6.6.6" }
      ],
      spinning: false
    };
  },
  methods: {
    tableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
    },
    add() {
      this.tableData.push({
        name: "新增",
        address: "newAddress"
      });
    },
    del(index) {
      this.$confirm({
        title: "提示",
        content: "是否确认删除该行?",
        onOk: () => {
          this.tableData.splice(index, 1);
        }
      });
    }
  }
};
</script>

<style></style>
